/**
 * @author brendan
 */
var exampleText = apkn_globals.guidelines_example;
var expandAllText = apkn_globals.guidelines_expand_all;
var collapseAllText = apkn_globals.guidelines_collapse_all;

window.onload = function(){
	// For every example - td with an #extrarow - run the following script
	// to enable the toggling of the display of the example.
	// create a global expand all button.
	var expandAll = $(document.createElement('span'));
	var collapseAll = $(document.createElement('span'));
	var tables = $('td.CollapsedTableText').parents('table');
	
	expandAll.addClass('viewAction expandAll');
	expandAll.text(expandAllText);
	expandAll.bind('click',function(){
		var c = $('td.CollapsedTableText').parent('tr');
		c.show();
	});
	
	collapseAll.addClass('viewAction collapseAll');
	collapseAll.text(collapseAllText);
	collapseAll.bind('click',function(){
		var c = $('td.CollapsedTableText').parent('tr');
		c.hide();
	});
	
	//table.before(expandAll);
	//table.before(collapseAll);
	tables.each(function(index,elem){
		$(elem).before(expandAll);
		$(this).before(collapseAll);
		$(this).css('clear', 'right');
	});
	
	$('td.CollapsedTableText').each(function(index, elem){
		var parent = $(elem).parent();
		// get the previous row to the one with this td#extrarow.
		var prevRow = parent.prev();
		// grab the last td from the previous row.
		var lastChild = prevRow.children('td:last');
		// grab the table parent.
		var parentTable = parent.parent('table');
		
		parent.hide();
		parent.children('td').css({
			background: '#fff',
			border: '0 none'
		});
		parent.children('td:last').css({
			background:'#eee',
			borderBottom: '1px solid #aaa'
		});
		
		// create a new element to press and toggle the view of the example
		var s = $(document.createElement('span'));
		// make sure that there isn't another element for toggling the example
		if (lastChild.children('span.viewAction').length == 0) {
			s.addClass('viewAction');
			s.text(exampleText);
			// bind an event listener to the element
			s.bind('click', function(){
				// get the state of the parent
				var state = parent.css('display');
				if (state == 'hidden' || state == 'none') 
					parent.show();
				else 
					parent.hide();
			});
			// add the element to the last td in the previous row.
			lastChild.append(s);
		}
	});
	
	/*
	 * toggle for the dossiers/blockitems
	 */
	// get the dt
	$('div#content div.collapsibleFolderList > dl dt').each(function(index){
		// store it locally,
		var dt = $(this);
		dt.css('clear', 'left');
		// grab the corresponding dd
		var dd = $('#content .collapsibleFolderList dd:eq('+index+')');
		// grab the contents of the dd
		var ddText = dd.text();
		// create new text for the dd...
		ddText = $.trim(ddText);
		var ddTextShort = ddText.substr(0, 90) + '...';
		dd.css({
			paddingLeft:'1.75em',
			clear: 'left'
		});
		// give the dd a state
		var ddState = 'off';
		//dd.hide();
		dd.text(ddTextShort);
		var togglr = $(document.createElement('span'));
		togglr.text('[o]');
		togglr.css({
			background:'url(/++resource++plonetheme.apkntheme.images/plus.png) no-repeat 0 0',
			display:'block',
			float:'left',
			width:'1.25em',
			height:'16px',
			textIndent:'-9999em',
			margin:'.25em',
			cursor: 'pointer'
		});
		togglr.bind('click', function(){
			// get the state
			var state = dd.css('display');
			//if (state == 'hidden' || state == 'none') {
			if(ddState == 'off'){
				togglr.css('background-image','url(/++resource++plonetheme.apkntheme.images/minus.png)');
				//dd.show();
				dd.text(ddText);
				ddState = 'on';
			}
			else {
				togglr.css('background-image','url(/++resource++plonetheme.apkntheme.images/plus.png)');
				//dd.hide();
				dd.text(ddTextShort);
				ddState = 'off';
			}
		});
		
		dt.prepend(togglr);
	});
}
